<template>
  <div>
    <el-dialog
      title="结果确认"
      :visible.sync="dialogVisible2"
      @closed="childmethod2"
      width="80%"
    >
      <el-form labelWidth="150px">

        <el-form-item label="仪器名称：">
          {{cofirmData.ep_ename}}
        </el-form-item>
        <el-form-item label="规格型号：">
          {{cofirmData.scale}}
        </el-form-item>
        <el-form-item label="检定日期：">
          {{cofirmData.verifiytime}}
        </el-form-item>
        <el-form-item label="溯源方式：">
          {{cofirmData.traceability}}
        </el-form-item>

        <el-form-item label="管理编号：">
          {{cofirmData.managenum}}
        </el-form-item>
        <el-form-item label="检定/校准单位：">
          {{cofirmData.verifiy_company}}
        </el-form-item>
        <el-form-item label="检定/校准证书编号：">
          {{cofirmData.certnum}}
        </el-form-item>
        <el-form-item label="检定/校准费用(元)：">
          {{cofirmData.verifiy_fee}}
        </el-form-item>

        <el-form-item label="确认依据" style="width:100%" class="is-required">
          <div style="display:flex;justify-content:space-between">
            <confirmrely :selectconfirm.sync="selectconfirm" style="width:92%" v-if="isconfirmrely"></confirmrely>
            <el-button size="small" type="primary" style="height:30px;margin-top:6px" @click="postconfirm">添 加</el-button>
          </div>

        </el-form-item>
        <el-form-item label="已选依据" style="width:100%">
          <p v-for="(item, index) in confirmArr" :key="index">{{item}}&nbsp;&nbsp;&nbsp;<i class="el-icon-delete" style="font-size:16px;" @click="deleteconfirmdely(index)"></i></p>
        </el-form-item>
        <el-form-item label="确认情况" style="width:100%" class="is-required">
          <!-- <ue :config="config" ref="ue"></ue> -->
          <vue-ueditor-wrap v-model="confirm_content" :config="myConfig"></vue-ueditor-wrap>
        </el-form-item>


        <el-form-item label="结论" style="width:100%" class="is-required">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="confirm_conclusion"
          >
          </el-input>
          <div class="el-form-item__error" v-if="confirm_conclusion==''">
            请输入结论
          </div>
        </el-form-item>
        <el-form-item label="确认时间" style="width:100%" class="is-required">
          <el-date-picker
            valueFormat="yyyy-MM-dd"
            v-model="confirmtime"
            type="date"
            style="width:100%"
            placeholder="选择日期"
          >
          </el-date-picker>
          <div class="el-form-item__error" v-if="confirmtime==''">
            请选择确认时间
          </div>
        </el-form-item>

      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible2 = false">取 消</el-button>
        <el-button size="mini" @click="doprint">打印预览</el-button>
        <el-button size="mini" type="primary" @click="submitconfirm" v-if="cofirmData.status!='3'">确 定</el-button>
      </span>
    </el-dialog>
    <div v-show="false">
      <div id="printrecord">
        <div>
          <div style="height:50px">

          </div>
          <div style="height:50px;line-height:50px;font-size:20px;text-align:center;font-weight:600;color:#333">
            检定/校准结果确认记录
          </div>
          <div class="tablediv">
            <span style="border-bottom:0">仪器名称</span>
            <span style="border-left:0;border-right:0;border-bottom:0;font-size:13px">{{shrecordData.ep_ename}}</span>
            <span style="border-bottom:0">仪器型号</span>
            <span style="border-left:0;border-bottom:0">{{shrecordData.scale}}</span>
          </div>
          <div class="tablediv">
            <span style="border-bottom:0">仪器编号</span>
            <span style="border-left:0;border-right:0;border-bottom:0">{{shrecordData.managenum}}</span>
            <span style="border-bottom:0">使用部门</span>
            <span style="border-left:0;border-bottom:0">{{shrecordData.confirm_org}}</span>
          </div>
          <div class="tablediv">
            <span style="width:25%;border-bottom:0">校定/校准单位</span>
            <span style="width:75%;border-left:0;border-bottom:0">{{shrecordData.verifiy_company}}</span>
          </div>
          <div class="tablediv">
            <span style="width:25%;border-bottom:0">校定/校准证书编号</span>
            <span style="width:75%;border-left:0;border-bottom:0">{{shrecordData.certnum}}</span>
          </div>
          <div class="tablediv">
            <span style="width:25%;height:auto;border-bottom:0">确认依据</span>
            <span class="span" style="width:75%;line-height:25px;text-align:left;white-space:pre;height:auto;border-left:0;border-bottom:0;" v-if="shrecordData.confirm_basis">
              <p v-for="(item, index) in shrecordData.confirm_basis" :key="index">{{item}}</p>
            </span>
            <span style="width:75%;line-height:50px;white-space:pre;height:auto;border-left:0;border-bottom:0;" v-else>
              <b>暂无依据</b>
            </span>
          </div>

          <div class="tablediv">
            <span style="width:100%;height:100%;padding:20px;min-height:45vh;border-bottom:0;">
              <p style="height:40px;line-height:40px;text-align:left">确认情况：</p>
              <div v-html="shrecordData.confirm_content">
                {{shrecordData.confirm_content}}
              </div>
            </span>
          </div>
          <div class="tablediv">
            <span style="width:25%;line-height:50px;;border-right:0">结论</span>
            <span style="width:75%;line-height:50px">{{shrecordData.confirm_conclusion}}</span>
          </div>
        </div>
        <div style="display:flex;justify-content:space-around;line-height:40px;margin-top:20px">
          <span>确认：<img :src="shrecordData.confirm_person_signature" height="40" v-if="shrecordData.confirm_person_signature!=''"></span>
          <span>审核：<img :src="shrecordData.check_person_signature" height="40" v-if="shrecordData.check_person_signature!=''"></span>
          <span>批准：<img :src="shrecordData.approval_person_signature" height="40" v-if="shrecordData.approval_person_signature!=''"></span>
          <span>批准日期：{{shrecordData.confirm_time}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
import confirmrely from '~/components/common/confirmrely.vue';

export default {
  props: {
    item2: {
      type: Object,
      required: true,
    },
    childmethod2: Function,
  },
  components: {
    confirmrely,
    VueUeditorWrap,
  },
  data() {
    return {
      innerVisible33: false,
      ts: this.newStore(),
      dialogVisible2: true,
      isconfirmrely: true,
      cofirmData: {},
      confirm_conclusion: '',
      confirmtime: '',
      myConfig: {
      // 编辑器不自动被内容撑高
        zIndex: '3000',
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/UE/',
      },
      shrecordData: {
        confirm_content: '',
      },
      confirm_content: '',
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 200,
        zIndex: 9999,
      },
      selectconfirm: '',
      confirmArr: [],
    };
  },
  created() {
    console.log(this.item2);
    this.cofirmData = {};
    this.confirmArr = [];
    const req2 = {
      handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7AF1087BC5FD3B20C5526704B7BEE1B46A',
      id: this.item2.hash.id,

    };
    this.spost(this.ts, '/mainservlet', req2).then((ts) => {
      this.cofirmData = ts.d.data.operation1[0].hash;
      this.confirm_conclusion = this.cofirmData.confirm_conclusion;
      this.confirmtime = this.cofirmData.confirm_time;
      this.confirm_content = this.cofirmData.confirm_content;
      if (this.cofirmData.confirm_basis == '') {
        this.confirmArr = [];
      } else {
        this.confirmArr = this.cofirmData.confirm_basis.split('##');
      }
    });
  },
  methods: {
    doprint() {
      this.shrecordData = this.cofirmData;
      this.shrecordData.confirm_basis = this.confirmArr;
      this.shrecordData.confirm_content = this.confirm_content;
      console.log(this.shrecordData.confirm_content)
      this.shrecordData.confirm_conclusion = this.confirm_conclusion;
      this.$nextTick(() => {
        const detailContent = document.getElementById('printrecord');
        Print('#printrecord');
      });
    },
    submitconfirm() {
      if (this.confirmArr.length == 0) {
        this.$message({
          type: 'error',
          message: '至少添加一个确认依据',
        });
        return;
      }
      if (this.confirm_content == '') {
        this.$message({
          type: 'error',
          message: '请填写确认情况',
        });
        return;
      }
      if (this.confirm_conclusion == '') {
        this.$message({
          type: 'error',
          message: '请填写结论',
        });
        return;
      }
      if (this.confirmtime == '') {
        this.$message({
          type: 'error',
          message: '请选择确认时间',
        });
        return;
      }
      const req2 = {
        handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A05541761A394FE155E9FA2AEA864FFB5',
        id: this.cofirmData.id,
        confirm_time: this.confirmtime,
        confirm_conclusion: this.confirm_conclusion,
        confirm_basis: this.confirmArr.join('##'),
        confirm_content: this.confirm_content,

      };
      const req = {
        handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A29A331ABF81FE2066A677D1C1AAE06F9',
        content: this.confirmArr,
      };
      this.$confirm('确认提交确认记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.spost(this.ts, '/mainservlet', req).then(() => {
            this.spost(this.ts, '/mainservlet', req2).then(() => {
              console.log(req2,'req2')
              this.$message({
                type: 'success',
                message: '提交成功',
              });
              this.dialogVisible2 = false;
              this.$parent.showdia(2, this.cofirmData.vid);
            });
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    // 删除确认依据
    deleteconfirmdely(index) {
      this.confirmArr.splice(index, 1);
    },
    // // 获取确认情况iframe
    // getUEContent() {
    //   const content = this.$refs.ue.getUEContent();
    //   return content;
    // },
    // 刷新确认依据组件
    reload() {
      this.isconfirmrely = false;
      this.$nextTick(() => {
        this.isconfirmrely = true;
      });
    },
    // 点击添加方法
    postconfirm() {
      const a = this.selectconfirm;
      this.confirmArr.push(a);
      this.reload();
      console.log(this.selectconfirm);
    },
  },
};
</script>

<style scoped>
.el-form-item {
    width: 50%;
    margin-bottom: 22px;
    float: left;
}
.statusspan{
  display: inline-block;
  width: 30px;
  height: 30px;

}
.tablediv{
  display: flex;
  justify-content: space-around;

}
.tablediv span{
  border:1px solid #333;
  display: inline-block;
  width: 25%;
  height: 50px;
  line-height: 50px;
  text-align: center
}
.span{
  line-height: 25px!important;
}
</style>
